<template>
	<div class="shop-car">
		<div class="mui-card" v-for="shopItem in shopCar.carItem" :key="shopItem.productId">
				<div class="mui-card-content">
					<div class="mui-card-content-inner" style="display:flex;justify-content:space-between;flex-direction:row;">
						<mt-switch v-model="shopItem.flag"></mt-switch>
						<img :src="shopItem.thumbPath">
						<div>
							<p>{{shopItem.title}}</p>
							<div style="float:right;padding-right:10px;">
								<span>${{shopItem.sellPrice}}</span>
								<div class="mui-numbox" data-numbox-min='1'>
									<button class="mui-btn mui-btn-numbox-minus" type="button" @click="$store.commit('changeProductCount',{productId:shopItem.productId,count:shopItem.count-1});shopCar.totalCount--;">-</button>
									<input id="test" class="mui-input-numbox" type="number" :value="shopItem.count"/>
									<button class="mui-btn mui-btn-numbox-plus" type="button" @click="$store.commit('changeProductCount',{productId:shopItem.productId,count:shopItem.count+1});shopCar.totalCount++;">+</button>
								</div>
								<a href="javascript:void(0);" @click="deleteProduct(shopItem.productId)">删除</a>
							</div>
						</div>
					</div>
				</div>
		</div>
			<div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<p>总计(不含运费)</p>
						<div style="display:flex;flex-direction:row;justify-content:space-between;">
							<div style="display:flex;align-items:flex-end;"><span>已勾选商品<span>{{chooesdProduct.totalCount}}</span>件，总价<span>￥{{chooesdProduct.totalMoney}}</span>元</span></div>
							<mt-button type="danger" size="small">去结算</mt-button>
						</div>
					</div>
				</div>
			</div>
	</div>
</template>
<script>
import mui from '../lib/mui/js/mui.min.js'
import Interface from '../interface.js'
export default {
	data(){
		return {
			shopCar: Object.assign({},this.$store.state.shopCar)
		}
	},
	created(){
		console.log(this.shopCar)
		for(var i = 0; i < this.shopCar.carItem.length; i++) {
			// 初始化每个商品前的选择属性
			this.shopCar.carItem[i].flag = false;
			(function(index,vm){
					vm.axios.get(Interface.getgoodsinfoBaseUrl+vm.shopCar.carItem[i].productId).then(result=>{
					if(result.data.status === true)
					{
						vm.$set(vm.shopCar.carItem,index,Object.assign({},vm.shopCar.carItem[index],result.data.message[0]))
					}
					else{
						console.log(result.data)
					}
				})
				.catch(err=>{
					alert(err.message)
				})
			})(i,this)
		}
	},
	methods:{
		deleteProduct(productId){
			for(var i = 0; i < this.shopCar.carItem.length; i++)
			{
				if(this.shopCar.carItem[i].productId == productId)
				{
					this.$store.commit('deleteFromCar',productId);
					this.shopCar.carItem.splice(i,1);
				}
			}
		}
	},
	computed:{
		chooesdProduct(){
			var pList = {
				choosedProducts:[],
				totalCount:0,
				totalMoney:0
			}
			pList.tot
			this.shopCar.carItem.forEach(element => {
				if(element.flag)
				{
					pList.choosedProducts.push(element)
					pList.totalCount += element.count
					pList.totalMoney += element.count*element.sellPrice
				}
			});
			return pList;
		}
	}
}
</script>
<style lang="less" scoped>
	.shop-car{
		padding-top: 10px;
		background-color: #eee;
	}
	.mui-numbox{
		height: 25px;
	}
	.mui-card-content-inner img{
		height: 50px;
	}
</style>